<template>
	<view class="page" :key="refreshKey">
		<!-- <view class="custom-video">
			<video preload="auto" style="width: 100%; height: 100%;border: 0px;display: block;" object-fit="fill"
				:src="videoUrl">
			</video> -->
		<!-- <view class="video-img" @click="isPlay=true">
				<image src="http://101.89.155.150:8088/storage/fetch/1838623743866306560" mode="aspectFill"></image>
				<view class="imgPlay">
					<image src='/static/img/play.png'></image>
				</view>
			</view> -->
		<!-- </view> -->
		<view class="header" style="animation-duration: 2s;">
			<!-- <view class="title"></view>
			<view class="bg-gradual">
				<view class="swiper-content">
					<uv-swiper key-name="url" style="background: transparent;" radius="0" :list="carousels"
						height="100%"></uv-swiper>
				</view>
			</view> -->
			<view class="hangqing">
				<view class="hangqing-l">
					<view class="hangqing-t">行情</view>
					<view class="hangqing-e">
						去看看
					</view>
				</view>
			</view>
		</view>
		<!-- <uv-grid :col="navPageItems.length">
			<uv-grid-item class="grid-item" v-for="item in navPageItems" @click="navPage(item)">
				<view class="bg">
					<uv-icon :name="item.navIcon" size="30"></uv-icon>
				</view>
				<text class="grid-text">{{ item.navTitle }}</text>
			</uv-grid-item>
		</uv-grid> -->
		<!-- <uv-grid :col="4">
			<uv-grid-item class="grid-item" @click="gotoPage('../companyIntroduction/companyIntroduction')">
				<view class="bg">
					<uv-icon name="/static/img/gsjs.png" size="30"></uv-icon>
				</view>
				<text class="grid-text">公司介绍</text>
			</uv-grid-item>
			<uv-grid-item class="grid-item" @click="gotoPage('../investFuture/investFuture')">
				<view class="bg">
					<uv-icon name="/static/img/tzqj.png" size="30"></uv-icon>
				</view>
				<text class="grid-text">公司资质</text>
			</uv-grid-item>
			<uv-grid-item class="grid-item" @click="gotoPage('../memberLevel/memberLevel')">
				<view class="bg">
					<uv-icon name="/static/img/hydj.png" size="30"></uv-icon>
				</view>
				<text class="grid-text">会员等级</text>
			</uv-grid-item>
			<uv-grid-item class="grid-item" @click="gotoPage('../rewardExplain/rewardExplain')">
				<view class="bg">
					<uv-icon name="/static/img/jlzd.png" size="30"></uv-icon>
				</view>
				<text class="grid-text">奖励制度</text>
			</uv-grid-item>
		</uv-grid> -->
		<view class="content">
			<view class="grid" style="animation-duration: 2s;">
				<view class="grid-item" @click="navContentPage('公司简介')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/jianjie.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">公司简介</view>
					</view>
				</view>
				<view class="grid-item" @click="gotoPage('../myTeam/myTeam')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/tuandui.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">我的团队</view>
					</view>
				</view>
				<view class="grid-item" @click="navContentPage('公司资质')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/zizhi.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">公司资质</view>
					</view>
				</view>
				<view class="grid-item" @click="gotoPage('../teamReward/teamReward')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/jiangli.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">团队奖励</view>
					</view>
				</view>
				<view class="grid-item" @click="navContentPage('风控管理')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/guanli.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">风控管理</view>
					</view>
				</view>
				<view class="grid-item" @click="navContentPage('推荐机制')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/jizhi.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">推荐机制</view>
					</view>
				</view>
				<view class="grid-item" @click="navContentPage('安全保障')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/baozhang.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">安全保障</view>
					</view>
				</view>
				<view class="grid-item" @click="gotoPage('../memberLevel/memberLevel')" style="animation-duration: 1s;">
					<view class="bg">
						<image src="/static/img/home/dengji.png"></image>
					</view>
					<view class="text">
						<view class="grid-text">会员等级</view>
					</view>
				</view>
				<view class="line"></view>


			</view>

			<view class="more">
				<view class="more-title">
					<view class="line"></view>
					新闻资讯
				</view>
				<view class="more-text" @click="newsInformationPage">
					查看更多
					<image src="/static/img/home/zhankai.png"></image>
				</view>
			</view>
			<view class="new" v-for="record in newsInformations" @click="newsDetailPage(record)" style="animation-duration: 1s;">
				<view class="new-l">
					<image style="width: 168rpx; height: 168rpx;border-radius: 16rpx;" mode="aspectFit"
						:src="record.mainPic"></image>
					</view>
				<view class="new-r">
					<view class="new-title">{{ record.title }}</view>
					<view class="new-summary">
						<text class="uv-line-2">{{ new Date(record.publishTime).getMonth() + 1 }}月{{ new
							Date(record.publishTime).getDate() }}日</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			videoUrl: '',
			currentTab: '',
			newsInformations: [],
			isPlay: false, //是否播放視頻
			carousels: [{
				url: '/static/img/home/bg.png',
			}],
			refreshKey:0
		}
	},
	onLoad(option) {
		this.getTab2VideoUrl();
		this.findNewsInformation();
	},
	onShow(){
		this.refreshKey += 1;
	},
	methods: {

		navContentPage(title) {
			uni.navigateTo({
				url: '../navContent/navContent?title=' + title
			});
		},

		getTab2VideoUrl() {
			uni.$uv.http.get('/setting/getTab2VideoUrl').then(res => {
				this.videoUrl = res.data;
			});
		},

		getpost() {

		},
		gotoPage(path) {
			uni.navigateTo({
				url: path
			});
		},

		newsInformationPage() {
			uni.navigateTo({
				url: '../newsInformation/newsInformation'
			});
		},

		newsDetailPage(record) {
			uni.navigateTo({
				url: '../newsDetail/newsDetail?id=' + record.id
			});
		},

		findNewsInformation() {
			uni.$uv.http.get('/newsInformation/findTop3').then(res => {
				this.newsInformations = res.data;
			});
		},
	}
}
</script>

<style scoped lang="less">
page {
	background: url('/static/img/my_bg1.png') no-repeat;
	background-size: 100% 20%;
	background-color: #f3f5ff;
}

.header {
	height: auto;
	position: relative;
	overflow: hidden;
	padding-bottom: 32rpx;
    .hangqing{
		display: flex;
		width: 90%;
		margin: 0 auto;
		height: 150rpx;
		background: url(/static/img/hangqing.png);
		background-size:100% ;
		margin-top: 15%;
		.hangqing-l{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 150rpx;
			.hangqing-t{
				font-size: 45rpx;
				color: #4e360e;
			}
			.hangqing-e{
				background-color: #e2b564;
				color: #FFF;
				text-align: center;
				padding: 0rpx 20rpx 0rpx 20rpx;
				border-radius: 30rpx;
				margin-top: 10rpx;
				font-size: 30rpx;
			}
		}
	}
	.bg-img {
		width: 100%;
		position: absolute;
		height: 100%;
		z-index: 0;
		filter: blur(20px);
		transform: scale(2);
	}

	.title {
		font-weight: 600;
		color: #FFFFFF;
		font-size: 36rpx;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		position: relative;
		z-index: 1;
	}
}

.bg-gradual {
	background: transparent;
	margin-top: 20rpx;
}

.swiper-content {
	width: 686rpx;
	margin: 0px auto;
	box-sizing: border-box;
	border-radius: 20rpx;
	overflow: hidden;
	height: 323rpx;
	// box-shadow: 0px 5px 5px #d8eef8;
}

.content {
	border-radius: 60rpx 60rpx 0rpx 0rpx;
	padding-bottom: 40rpx;

	.grid {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 40rpx 20rpx 0 20rpx;
		position: relative;
		background-color: #FFF;
		margin-left: 35rpx;
		margin-right: 35rpx;
        border-radius: 20rpx;
		.line {
			width: 2rpx;
			height: 470rpx;
			position: absolute;
			background: rgba(255, 255, 255, 0.1);
			top: 40rpx;
			left: 49%;
			transform: translateX(-50%);
		}

		.grid-item {
			display: flex;
			align-items: center;
			width: 25%;
			margin-bottom: 40rpx;
			flex-direction: column;
			text-align: center;
			.bg {
				width: 88rpx;
				height: 88rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.text {
				width: 180rpx;

				.grid-text {
					color: #000;
					font-size: 26rpx;
					margin-top: 16rpx;
					margin-bottom: 16rpx;
				}

				.more-text {
					color: #8A8C90;
					font-size: 20rpx;
					text-wrap: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.grid-item:nth-child(2n) {
			justify-content: flex-end;
		}

	}

	.more {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #000;
		padding: 0 32rpx;
		height: 52rpx;
		margin-top: 30rpx;
		margin-bottom: 18rpx;

		.more-title {
			font-size: 32rpx;
			display: flex;
			align-items: center;

			.line {
				width: 6rpx;
				height: 28rpx;
				background-color:#2e3c86;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin-right: 6rpx;
			}
		}

		.more-text {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: #000;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}

.showmore {
	font-size: 24rpx;
	color: #686868;
}

.new-title {
	font-size: 30rpx;
	padding-bottom: 30rpx;
	font-weight: bold;
	color: #000;
	margin-left: 10rpx;
}



.new-r {
	flex: 1;
	margin-left: 10rpx;
}

.new-summary {
	font-size: 24rpx;
	color: #000;
	margin-left: 10rpx;
}

.new {
	display: flex;
	align-items: center;
	background-color: #FFF;
	margin: 0 40rpx;
	padding: 16rpx;
	border-radius: 20rpx;
	margin-bottom: 28rpx;
}

.new:last-child {
	margin-bottom: 100rpx;
}

.custom-tab-r {}

.custom-tab-l {
	height: 130rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 36rpx;
}

.custom-tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: solid #f5f5f5 1rpx;
	margin: 0 34rpx;
	padding-bottom: 4rpx;
}






.custom-video {
	width: 710rpx;
	height: 325rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin: 40rpx auto;

	.video-img {
		width: 100%;
		height: 100%;
		position: relative;

		image {
			display: block;
			width: 100%;
			height: 100%;
		}

		.imgPlay {
			background: rgba(0, 0, 0, 0.4);
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 64rpx;
				height: 64rpx;

			}
		}
	}
}

/deep/ .uni-video-container {
	background: none;
}
</style>